import { defineComponent } from 'vue-demi'
import { VALUE_NAME } from '../../utils/constant'
import { h } from '../../utils/domutil'
import { getNextId } from '../../utils/numutils'
import gsap from 'gsap'

const NAME = 'yc-screen-circle'

export default defineComponent({
  name: NAME,
  props: {
    [VALUE_NAME]: {
      type: String,
      default: '0,0'
    },
    /** 是否激活 */
    active: {
      type: Boolean,
      default: false
    },
    /** 所在层级 */
    level: {
      type: String,
      default: 'bottom' // bottom top
    },
    /** 内圆半径 */
    innerRadius: {
      type: Number,
      default: 8
    },
    /** 外圆半径 */
    outerRadius: {
      type: Number,
      default: 16
    },
    /** 内圆颜色 */
    innerColor: {
      type: String,
      default: 'red'
    },
    /** 外圆颜色 */
    outerColor: {
      type: String,
      default: 'blue'
    },
    /** 内圆激活时颜色 */
    innerActiveColor: {
      type: String,
      default: 'pink'
    },
    /** 外圆激活时的颜色 */
    outerActiveColor: {
      type: String,
      default: 'green'
    },
    /** 动画朝向 */
    direction: {
      type: String,
      default: 'right' // top bottom left right
    },
    /** 动画时长（秒） */
    duration: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      id: getNextId(),
      /** 动画 */
      activeTween: undefined,
      /** 矩形裁剪区域 */
      clipRect: {
        x: 0,
        y: 0,
        width: 0,
        height: 0
      }
    }
  },
  computed: {
    centerPoint() {
      const arr = this[VALUE_NAME].trim().split(/\s*,\s*/)
      return {
        x: Number(arr[0]),
        y: Number(arr[1])
      }
    },
    /** 外接矩形 */
    rect() {
      return {
        x: this.centerPoint.x - this.outerRadius,
        y: this.centerPoint.y - this.outerRadius,
        width: this.outerRadius * 2,
        height: this.outerRadius * 2
      }
    }
  },
  watch: {
    active() {
      this.tryRunAnimation()
    }
  },
  mounted() {
    this.init()
    this.tryRunAnimation()
  },
  methods: {
    init() {
      if (this.direction === 'top') {
        // 如果是向上
        // 起点在最下面
        this.clipRect = {
          ...this.rect,
          y: this.rect.y + this.rect.height,
          height: 0
        }
      } else if (this.direction === 'bottom') {
        // 如果是向下
        // 起点在最上面
        this.clipRect = {
          ...this.rect,
          height: 0
        }
      } else if (this.direction === 'left') {
        // 如果是向左
        // 起点在最右边
        this.clipRect = {
          ...this.rect,
          x: this.rect.x + this.rect.width,
          width: 0
        }
      } else {
        // 如果是向右
        // 起点在最左边
        this.clipRect = {
          ...this.rect,
          width: 0
        }
      }
    },
    /** 执行激活动画 */
    runActiveAnimation() {
      if (this.activeTween) {
        this.activeTween.play()
      } else {
        this.activeTween = gsap.to(this.clipRect, {
          duration: this.duration,
          ...this.rect
        })
      }
    },
    /** 执行还原动画 */
    runRestoreAnimation() {
      if (this.activeTween) {
        this.activeTween.reverse()
      }
    },
    /** 尝试执行动画 */
    tryRunAnimation() {
      if (this.active) {
        this.runActiveAnimation()
      } else {
        this.runRestoreAnimation()
      }
    },
    /** 获取底层圆 */
    getBottomCircles() {
      return h('g', [
        h('circle', {
          attrs: {
            cx: this.centerPoint.x,
            cy: this.centerPoint.y,
            r: this.outerRadius,
            fill: this.outerColor
          }
        }),
        h('circle', {
          attrs: {
            cx: this.centerPoint.x,
            cy: this.centerPoint.y,
            r: this.innerRadius,
            fill: this.innerColor
          }
        })
      ])
    },
    /** 获取上层圆 */
    getTopCircles() {
      return h('g', { attrs: { 'clip-path': `url(#${NAME}clipPath${this.id})` } }, [
        h('circle', {
          attrs: {
            cx: this.centerPoint.x,
            cy: this.centerPoint.y,
            r: this.outerRadius,
            fill: this.outerActiveColor
          }
        }),
        h('circle', {
          attrs: {
            cx: this.centerPoint.x,
            cy: this.centerPoint.y,
            r: this.innerRadius,
            fill: this.innerActiveColor
          }
        })
      ])
    },
    getCircles() {
      if (this.level === 'top') {
        return this.getTopCircles()
      } else {
        return this.getBottomCircles()
      }
    }
  },
  render() {
    return h(
      'g',
      { class: { 'is-active': this.active } },
      h('defs', [
        h('clipPath', { attrs: { id: `${NAME}clipPath${this.id}` } }, [
          h('rect', {
            attrs: {
              ...this.clipRect
            }
          })
        ])
      ]),
      this.getCircles()
    )
  }
})
